<template>
    <div style="display: flex;flex-direction: column;height: 100%;">
        <div style="padding: 12px;flex-wrap: wrap;display: flex;flex: 1;overflow-y: auto;">
            <div v-for="(item, idx) in templateList" :key="idx" 
              @click="itemClickHandle(idx, item)"
              :style="{'margin-bottom':'12px', 'margin-right': '12px', 'padding': '11px', 
              'border': currActive === idx ? '1px solid #2456E0' : '1px solid #ebebeb', 
              'border-radius': '8px', 'display': 'flex', 'width': 'calc(25% - 12px)'}"
              >
                <el-image
                    style="width: 110px; height: 110px;"
                    :src="getFirstUrl(item.pictureArray)"
                    fit="cover">
                </el-image>

                <div style="flex: 1;display: flex;flex-direction: column;padding-left: 10px;">
                    <div style="font-size: 13px;font-weight: bold;text-align: center;">
                      {{ item.title}}
                    </div>
                    <div style="font-size: 12px;color: #666666;margin-top: 12px;">
                      {{ item.content }}
                    </div>
                </div>
            </div>        
        </div>        
        <div v-if="!forCheck" style="padding: 12px;background-color: white;display: flex;justify-content: center;">
            <el-button type="primary" @click="onEditTemplate('edit')">编辑</el-button>
            <el-button type="primary" plain @click="onEditTemplate('add')">新增</el-button>
        </div>
        <el-dialog
          v-if="editType"
          title="模版详情"
          :visible.sync="templateVisible"
          width="60%"
          :destroy-on-close="true"
          @close="handleCloseTemplate">
          <templateDetail :editType="editType" :editInfo="activeObj" @onCloseToggle="handleCloseTemplate"/>
        </el-dialog>
    </div>
</template>

<script>
  import { getTemplateDataList } from '@/api/yzNote';
  import templateDetail from './detail.vue'
  export default {
    components: {
      templateDetail
    },
    props: {
      forCheck: ''
    },
    data() {
        return {
          templateList: [],
          currActive: '',
          templateVisible: false,
          activeObj: {},
          editType: ''
        };
    },
    mounted() {
      this.fetchTemplateList();
    },
    methods:{
        itemClickHandle(idx, records) {
          this.currActive = idx;
          this.activeObj = records;
          if (this.forCheck) {
            this.$emit('checkItem', records)
          }
        },
        async fetchTemplateList() {
          const { data } = await getTemplateDataList({});
          if (data.code === 200) {
            this.templateList = data.data || [];
          } else {
            this.$message({
              message: data.msg || '模版加载失败',
              type: 'error',
              showClose: true,
              duration: 3000,
            });
          }
        },
        getFirstUrl(imgStr) {
          const list = typeof imgStr === 'string' ? imgStr.split(',') : [];
          return list[0];
        },
        handleCloseTemplate(params) {
          this.templateVisible = false;
          this.editType = '';
          this.currActive = '';
          this.activeObj = {};
          if (params.isSave) {
            // 刷新列表
            this.fetchTemplateList();
          }
        },
        onEditTemplate(editType) {
          if (Object.keys(this.activeObj).length || editType === 'add') {
            this.templateVisible = true;
            this.editType = editType;
          } else {
            this.$message({
              message: '请先选择一个模板',
              type: 'error',
              showClose: true,
              duration: 3000,
            });
          }
        }
    }
}
</script>